<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/index.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="main">

    <!--  header部分-->

    <header>

        <!--  整页导航栏-->
        <nav class="navTop">
            <div class="navmain">

                <!--                左边导航-->
                <div class="leftTopNav">
                    <a href="">小米商城</a>
                    <span> | </span>
                    <a href="">MIUI</a>
                    <span>|</span>
                    <a href="">loT</a>
                    <span>|</span>
                    <a href="">云服务</a>
                    <span>|</span>
                    <a href="">天星数科</a>
                    <span>|</span>
                    <a href="">有品</a>
                    <span>|</span>
                    <a href="">小爱开放平台</a>
                    <span>|</span>
                    <a href="">企业团购</a>
                    <span>|</span>
                    <a href="">资质证照</a>
                    <span>|</span>
                    <a href="">协议规则</a>
                    <span>|</span>
                    <a class="app" href="">下载app

                        <div class="sanJiao"></div>
                        <div class="downApp">

                            <img src="images/download.png">
                            <p>小米商城app</p>
                        </div>
                    </a>
                    <span>|</span>
                    <a href="">智能生活</a>
                    <span>|</span>
                    <a href="">Select Location</a>
                    <span>|</span>
                </div>

                <!--                购物车-->
                <div class="topbar-info">
                    <a href="#">
                        <em class="cart"><img src="images/cart1.png"></em>
                        <em>购物车</em>
                        <span>（0）</span>
                    </a>
                    <div class="shopCar">
                        你还没有商品加入购物车
                    </div>
                </div>

                <!--                登录注册-->
                <div class="topbar-info2">
                    <a href="#">登录</a>
                    <span>|</span>
                    <a href="#">注册</a>
                    <span>|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>

            <div class="rightTopNav"></div>
        </nav>

        <!--        头部导航栏-->
        <div class="navTop2">

            <div class="header_logo">
                <a href="#"></a>
            </div>
            <div class="listheadernav">

                <ul>

                    <li>
                        <a href="">
                            手机 电话卡
                            <em></em>
                        </a>
                        <div c lass="listItem">

                        </div>
                    </li>
                    <li>
                        <a href="">
                            电视 盒子
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            笔记本 显示器
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            家电 插线板
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            出行 穿戴
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            智能 路由器
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            电源 配件
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            健康 儿童
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            耳机 音响
                            <em></em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            生活 箱包
                            <em></em>
                        </a>
                    </li>

                </ul>


            </div>

            <div id="listfff" class="navMainList">
                <ul>
                    <div class="shop2hide">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="images/listImg2.webp" alt="">
                                </a>
                                <div>
                                    <span>小米MIX FOLG</span>
                                    <span>9999元起</span>
                                </div>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/listImg3.webp" alt="">

                                </a>
                                <div>
                                    <span>小米11 UItra</span>
                                    <span>5499元起</span>
                                </div>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/listImg4.webp" alt="">

                                </a>
                                <div>
                                    <span>小米11 Pro</span>
                                    <span>4499元起</span>
                                </div>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/listImg5.webp" alt="">

                                </a>
                                <div>
                                    <span>小米11 青春版</span>
                                    <span>2099元起</span>
                                </div>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/listImg6.webp" alt="">

                                </a>
                                <div>
                                    <span>小米11</span>
                                    <span>3799元起</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <li>
                        <a href="#">小米手机</a>
                    </li>
                    <li><a href="#">Redmi 红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>

            <!--            搜索框-->
            <div class="search">
                <form action="#">
                    <!--                        搜索框-->
                    <input id="searchtext" class="input1" type="text"><input class="input2" id="searchsubmit" type="submit" value="1">
                    <!--                        提交按钮-->

                </form>

                <div class="hostItem">
                    <ul>
                        <li>搜索历史</li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!--  头部内容区域-->
    <article class="xmArticle">



        <!--        头部轮播图-->
        <div id="demo" class="carousel slide" data-ride="carousel">



            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="imgpx" src="images/lb1.jpeg">
                </div>
                <div class="carousel-item">
                    <img class="imgpx" src="images/lb2.webp">
                </div>
                <div class="carousel-item">
                    <img class="imgpx" src="images/lb3.webp">
                </div>
            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>

        </div>



        <!--        头部列表-->
        <div class="headerlist">

            <!--            左边列表-->
            <div class="list_aside">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/4.png">
                            保障服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/5.png">
                            企鹅团购
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/6.png">
                            F码通道
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="images/7.png">
                            米卡粉
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/8.png">
                            以旧换新
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/9.png">
                            话费充值
                        </a>
                    </li>
                </ul>
            </div>
            <div class="listContent">
                <ul>
                    <li>
                        <a href="">
                            <img src="images/1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/3.png">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </article>

    <!--    内容区域-->
    <article class="home_main">
        <div class="containered">

            <!--            内容头图片-->
            <section class="sectionheader">
                <a href=""><img src="images/sectionheaderImgwebp.webp"></a>
            </section>

            <!--                手机展示栏-->
            <section class="section_phone">
                <!--                手机标题-->
                <header>
                    <div>
                        <h2>手机</h2>
                        <div class="floatRighttetx">
                            <a href="">
                                查看更多
                                <span><img src="images/chevron-right.svg"></span>
                            </a>
                        </div>
                    </div>
                </header>
                <!--                手机内容区域-->
                <section class="phone_list">
                    <div class="phone_aside">
                        <img src="images/phone_left.webp">
                    </div>
                    <div class="phone_listItem">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone1.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>Note 10 Pro</h3>
                                    </div>
                                    <p class="text1">天玑1100年度旗舰芯</p>
                                    <p class="text2">
                                        <span>1599元起</span>
                                        <span class="del">1699元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone2webp.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>Redmi Note 10 5G</h3>
                                    </div>
                                    <p class="text1">5G小金刚 | 旗舰长续航</p>
                                    <p class="text2">
                                        <span>1900元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone3.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米MIX FOLD</h3>
                                    </div>
                                    <p class="text1">折叠大屏 | 自研芯片</p>
                                    <p class="text2">
                                        <span>9999元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone4.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米11 Ultra</h3>
                                    </div>
                                    <p class="text1">1/1.12"GN2 | 2k四维曲屏/p>
                                    <p class="text2">
                                        <span>5499元起</span>
                                        <span class="del">5999元</span>
                                    </p>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone1.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>Note 10 Pro</h3>
                                    </div>
                                    <p class="text1">天玑1100年度旗舰芯</p>
                                    <p class="text2">
                                        <span>1599元起</span>
                                        <span class="del">1699元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone2webp.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>Redmi Note 10 5G</h3>
                                    </div>
                                    <p class="text1">5G小金刚 | 旗舰长续航</p>
                                    <p class="text2">
                                        <span>1900元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone3.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米MIX FOLD</h3>
                                    </div>
                                    <p class="text1">折叠大屏 | 自研芯片</p>
                                    <p class="text2">
                                        <span>9999元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/phone4.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米11 Ultra</h3>
                                    </div>
                                    <p class="text1">1/1.12"GN2 | 2k四维曲屏/p>
                                    <p class="text2">
                                        <span>5499元起</span>
                                        <span class="del">5999元</span>
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>
            </section>

            <!--            家电展示栏-->
            <section class="section_phone">
                <!--                家电标题-->
                <header>
                    <div>
                        <h2>家电</h2>
                        <div class="floatRighttetx">
                            <a href="#" class="rm">
                                热门
                            </a>
                            <a href="#" class="rm">电视影音</a>
                        </div>
                    </div>
                </header>
                <!--                家电内容区域-->
                <section class="phone_list">
                    <div class="phone_aside">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="images/jiadian1.webp">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/jiadian2.webp">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="phone_listItem">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd1.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>全面屏电视E43K</h3>
                                    </div>
                                    <p class="text1">全面屏设计，海量内容</p>
                                    <p class="text2">
                                        <span>1349元起</span>
                                        <span class="del">1599元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd2.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>全面屏电视 55英寸E55X</h3>
                                    </div>
                                    <p class="text1">潮流全面屏设计</p>
                                    <p class="text2">
                                        <span>2999元起</span>
                                        <span class="del">2599元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd3.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米电视4A 60英寸</h3>
                                    </div>
                                    <p class="text1">人工智能语音系统 超高清画质</p>
                                    <p class="text2">
                                        <span>2799元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd5.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米电视4S 75 英寸</h3>
                                    </div>
                                    <p class="text1">4k HDR,人工智能语音</p>
                                    <p class="text2">
                                        <span>4999元</span>
                                        <span class="del">5999元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd4.jpg">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米全面屏电视65英寸 E65X</h3>
                                    </div>
                                    <p class="text1">全面屏设计</p>
                                    <p class="text2">
                                        <span>2999元</span>
                                        <span class="del">3299元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd10.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>米家互联网烟灶套装（天然气）</h3>
                                    </div>
                                    <p class="text1">点火排烟、风随火动</p>
                                    <p class="text2">
                                        <span>1999元</span>
                                        <span class="del">2298元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd11webp.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>米家电烤箱</h3>
                                    </div>
                                    <p class="text1">全能考培体验</p>
                                    <p class="text2">
                                        <span>269元</span>
                                        <span class="del">299元</span>
                                    </p>
                                </a>
                            </li>
                            <li class="li_last">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <div>
                                                    <p>Redmi 智能电视 Max</p>
                                                    <p class="red">1999元</p>
                                                </div>
                                                <div><img src="images/last1.webp"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="list_more">
                                                浏览更多
                                                <span class="br">热门</span>
                                            </div>
                                            <div class="more_go"><img src="images/arrow-right-circle.svg"></div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>


                <!--                智能标题-->
                <header>
                    <div>
                        <h2>智能</h2>
                        <div class="floatRighttetx">
                            <a href="#" class="rm">
                                热门
                            </a>
                            <a href="#" class="rm">安防</a>
                            <a href="#" class="rm">出行</a>
                        </div>
                    </div>
                </header>
                <!--                家电内容区域-->
                <section class="phone_list">
                    <div class="phone_aside">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="images/zn1.webp">
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="images/zn2.webp">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="phone_listItem">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zn4.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>米家智能窗帘</h3>
                                    </div>
                                    <p class="text1">窗帘开合随心控</p>
                                    <p class="text2">
                                        <span>749元</span>
                                        <span class="del">799元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/jd5.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>全面屏电视 55英寸E55X</h3>
                                    </div>
                                    <p class="text1">潮流全面屏设计</p>
                                    <p class="text2">
                                        <span>2999元起</span>
                                        <span class="del">2599元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zh3.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米小爱音响</h3>
                                    </div>
                                    <p class="text1">听音乐，语音遥控家电</p>
                                    <p class="text2">
                                        <span>109元起</span>
                                        <!--                                        <span class="del">1699元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zn6.jpg">
                                    </div>
                                    <div class="name_list">
                                        <h3>九号平衡车</h3>
                                    </div>
                                    <p class="text1">年轻人的酷玩具</p>
                                    <p class="text2">
                                        <span>1999元</span>
                                        <!--                                        <span class="del">5999元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zn7.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米智能门锁 推拉式</h3>
                                    </div>
                                    <p class="text1">一步推拉，高端智能门锁</p>
                                    <p class="text2">
                                        <span>1499元</span>
                                        <span class="del">1699元</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zn8.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>Redmi小爱触屏音响 8英尺</h3>
                                    </div>
                                    <p class="text1">超大屏，让智能更可能</p>
                                    <p class="text2">
                                        <span>499元</span>
                                        <!--                                        <span class="del">2298元</span>-->
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="a_img">
                                        <img src="images/zh5.webp">
                                    </div>
                                    <div class="name_list">
                                        <h3>小米手环5</h3>
                                    </div>
                                    <p class="text1">11中运动模式</p>
                                    <p class="text2">
                                        <span>169元起</span>
                                        <span class="del">189元</span>
                                    </p>
                                </a>
                            </li>
                            <li class="li_last">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <div>
                                                    <p>米家空气净化器pro</p>
                                                    <p class="red">1099元</p>
                                                </div>
                                                <div><img src="images/zn10.webp"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="list_more">
                                                浏览更多
                                                <span class="br">热门</span>
                                            </div>
                                            <div class="more_go"><img src="images/arrow-right-circle.svg"></div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>
            </section>
            <!--                尾部图-->

            <section class="sectionheader">
                <a href=""><img src="images/footheader.webp"></a>
            </section>
        </div>
    </article>


    <!--  网页尾部-->
    <footer class="home_footer">
        <div class="foot_top"></div>
        <div class="foot_bottom"></div>
    </footer>
</div>
</body>
</html>